<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>

<body>
    <div id="app">
        <h3>你最喜欢哪个轴体</h3>
        <label>
            <input type="checkbox" v-model="all" @change="fullClick()">全选
        </label><br>
        <label v-for="(item,index) in list">
            <input type="checkbox" v-model="item.check" @change="checkClick()">{{item.name}}
        </label><br>
        <div>
            新增其他：<input type="text" v-model="newName"><br>
            <input type="file" @change="load($event)">
            <button @click="add()">上传</button>
        </div>
        <div>
            <button @click="all=true,fullClick()">全选</button>
            <button @click="all=false,fullClick()">全不选</button>
            <button @click="Click()">反选</button>
        </div>
        <span>
            <img v-for="(item,index) in list" :src="item.src" style="width: 200px;height: 200px;"
                v-show="item.check==true">
        </span>
    </div>

</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                all:false,
                values: [],
                newName:'',
                fileSrc:'',
                list: [{
                        name: '白狐轴v2',
                        check: true,
                        src: './白狐轴V2.webp'
                    },
                    {
                        name: '枫糖轴',
                        check: false,
                        src: './枫糖轴.webp'
                    },
                    {
                        name: '胭脂轴',
                        check: false,
                        src: './胭脂轴V2.webp'
                    },
                ]
            }
        },
        methods: {
            fullClick() {
                //     if(this.all){
                //         this.list.map(v=>{
                //         v.check=true
                //     })
                // }
                // else{
                //     this.list.map(v=>{
                //         v.check=false
                //     })
                // }
                this.list.map(v => {
                    v.check = this.all
                })
            },
            checkClick() {
                let flag = this.list.length
                this.list.map(v => {
                    if (!v.check) flag--
                })
                if (flag < this.list.length)
                    this.all = false
                else
                    this.all = true

            },
            load(e) {
                let file= e.target.files
                let img=new FileReader()
                img.readAsDataURL(file[0])
                img.onload=({target})=>{
                    alert("上传成功")
                    this.fileSrc=target.result
                }
            },
            add(){
                this.list.push({name:this.newName,check:false,src:this.fileSrc})
            },
            Click(){
                this.list.map(v => {
                    v.check = !v.check
                })
                this.checkClick()
            }
        },
    }).mount("#app")
</script>

</html>